<template>
  <!--组织结构修改-->
  <div :style="{display: domShow ? 'block' : 'none' }">
    <a-form :form="form">
      <a-form-item label="隐藏的参数" :label-col="labelCol" :wrapper-col="wrapperCol" style="display: none" >
        <a-input v-decorator="['id', {initialValue: dept.id}]"/>
      </a-form-item>
      <a-form-item label="机构名称" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input
          v-decorator="[
            'name',
            {
              initialValue: dept.name,
              rules: [{ required: true, message: '请输入机构名称!' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item label="部门层级" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input disabled :value="dept.level"/>
      </a-form-item>
      <a-form-item label="创建时间" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input disabled :value="dept.createTime"/>
      </a-form-item>
      <a-form-item label="最新操作时间" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input disabled :value="dept.updateTime"/>
      </a-form-item>
      <a-form-item label="备注" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-textarea
          v-decorator="['remark', {initialValue: dept.remark}]"
        />
      </a-form-item>
      <a-form-item :wrapper-col="buttonCol">
        <a-button type="primary" :disabled="btnDisabled" @click="handleSubmit">
          <a-icon type="save" />保存
        </a-button>
        <a-button type="danger" :style="{ marginLeft: '8px' }" :disabled="btnDisabled" @click="handleDelete">
          <a-icon type="delete" />删除
        </a-button>
        <a-button :style="{ marginLeft: '8px' }" :disabled="btnDisabled" @click="handleReset">
          <a-icon type="retweet" />还原
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import api from '../system.js'

export default {
  name: 'DepartmentUpdate',
  props: {
    deptId: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      domShow: true,
      form: this.$form.createForm(this),
      labelCol: { span: 5 },
      wrapperCol: { span: 12 },
      buttonCol: { span: 12, offset: 5 },
      dept: {}
    }
  },
  // 侦听器
  watch: {
    deptId: {
      handler (newValue, oldValue) {
        this.deptId = newValue
        this.queryDept()
      },
      // 深度监听 || 发现对象内部值的变化
      deep: true,
      // 当值第一次绑定的时候，触发执行监听函数
      immediate: true
    }
  },
  computed: {
    btnDisabled () {
      if (this.dept && this.dept.id) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    // Form 条件还原
    handleReset () {
      this.form.resetFields()
    },
    // Form 条件清空
    handleClean () {
      this.dept = {}
      this.handleReset()
    },
    // 查询组织结构信息
    queryDept () {
      this.handleClean()
      if (this.deptId) {
        this.domShow = true
        this.axios.get(api.department.info + '/' + this.deptId)
          .then((response) => {
            this.dept = response.data
          })
          .catch((error) => {
            console.log('组织结构信息查询异常：', error)
          })
      }
    },
    // 保存提交
    handleSubmit () {
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          this.axios.post(api.department.update, values)
            .then((response) => {
              if (response.code === 200) {
                this.$message.success('保存成功')
                this.$emit('refresh')
              } else {
                this.$message.error('保存失败：' + response.message)
              }
            })
            .catch((error) => {
              this.$message.error('保存异常：' + error)
            })
        }
      })
    },
    // 删除按
    handleDelete () {
      this.axios.post(api.department.delete + '/' + this.deptId)
        .then((response) => {
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.$emit('refresh')
            this.handleClean()
          } else {
            this.$message.error('删除失败：' + response.message)
          }
        })
        .catch((error) => {
          this.$message.error('删除异常：' + error)
        })
    }
  }
}
</script>
